<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 3000px;
      height: 3000px;
    }

    div {
      width: 300px;
      height: 300px;
      margin: 50px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <span class="x">888</span>
  <span class="y">666</span>
  <span class="x1">888</span>
  <span class="y1">666</span>
  <span class="x2">888</span>
  <span class="y2">666</span>
  <div></div>

  <script>



    /*
      事件对象属性 - 鼠标事件
        + 事件对象内的信息中和鼠标事件相关的常用信息

      1. clientX 和 clientY
        + 光标相对于 浏览器可视窗口 左上角的坐标位置

      2. pageX 和 pageY
        + 光标相对于 文档流 左上角的坐标位置

      3. offsetX 和 offsetY
        + 光标相对于 准确触发事件的元素 左上角的坐标位置
    */

    // 获取元素
    document.addEventListener('mousemove', function (e) {
      // 1. client 一组
   
      console.log('clientX : ', e.clientX)
      console.log('clientY : ', e.clientY)
      document.querySelector(".x").innerHTML=e.clientX
      document.querySelector(".y").innerHTML=e.clientY
      console.log('----------------')

      // 2. page 一组
      console.log('pageX : ', e.pageX)
      console.log('pageY : ', e.pageY)
      document.querySelector(".x1").innerHTML=e.pageX
      document.querySelector(".y1").innerHTML=e.pageY

      console.log('----------------')

      // 3. offset 一组
      console.log('offsetX : ', e.offsetX)
      console.log('offsetY : ', e.offsetY)
      document.querySelector(".x2").innerHTML=e.offsetX
      document.querySelector(".y2").innerHTML=e.offsetY
    })

  </script>
</body>
</html>
